<template>
    <Root ref="ObjElement" :Config="Config" />
</template>
<script setup>
import { provide, ref, shallowRef } from 'vue'

import ObjectVue from './basic/Object.vue';
import ObjectItem from './basic/FormItem.vue';

import compontent from './util/ReadFiles'


const props = defineProps({
    'Config': {},
    'ExtendLayout': {
        type: Object,
        default: () => { return {} }
    },
    'ExtendType': {
        type: Object,
        default: () => { return {} }
    }
});

// 合并组件扩展
const TemplateMapping = {
    Base: {
        Object: ObjectVue,
        FormItem: ObjectItem,
    },
    Layout: {
        ...compontent.layout,
        ...props.ExtendLayout
    },
    Type: {
        ...compontent.type,
        ...props.ExtendLayout
    },
}


// 模板绑定
provide('TemplateMapping', TemplateMapping)
const Root = shallowRef();
// 规定默认初始项
Root.value = TemplateMapping.Base.Object

// 双向绑定
const emit = defineEmits([
    'update:modelValue',
    'RootEvent'
]);


const RootEvent = (name, value) => {
    emit('RootEvent', name, value)
}
provide('RootEvent', RootEvent)


//  输出、导出数据
const ObjElement = ref();


const GetValue = (callback) => {
    ObjElement.value.GetValue((err, val) => {
        callback(err, JSON.parse(JSON.stringify(val)))
    })
};
const SetValue = (val) => {
    ObjElement.value.SetValue(val);
};

const ReadonlyAll = (val) => {
    ObjElement.value.ReadonlyAll(val);
}

defineExpose({
    GetValue,
    SetValue,
    ReadonlyAll
})

</script>
<style lang="less" scoped></style>